<!--
 * @Description: 
 * @Date: 2025-09-02 16:02:38
 * @LastEditTime: 2025-09-02 16:41:26
-->

<template>
    <van-nav-bar title="AI用户画像" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <div class="min-h-screen " style=" background-color: #f5f7fa;
            color: #333;">
        <div class="container mx-auto px-4 py-4 max-w-3xl">
            <!-- 核心标签区域 -->
            <div class="card p-6 mb-6">
                <div class="flex items-center mb-4">
                    <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
                        <i class="fa fa-tags"></i>
                    </div>
                    <h2 class="text-xl font-semibold m-0">核心标签</h2>
                </div>
                <div class="flex flex-wrap">
                    <span class="tag bg-blue-100 text-blue-800"> 老年客户</span>
                    <span class="tag bg-purple-100 text-purple-800"> 机龄较长</span>
                    <span class="tag bg-green-100 text-green-800"> 无宽带</span>
                    <span class="tag bg-yellow-100 text-yellow-800"> 无家庭账户</span>
                </div>
            </div>

            <!-- 消费洞察区域 -->
            <div class="card p-6 mb-6">
                <div class="flex items-center mb-4">
                    <div
                        class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-3">
                        <i class="fa fa-line-chart"></i>
                    </div>
                    <h2 class="text-xl font-semibold m-0">消费洞察</h2>
                </div>
                <p class="text-gray-600 mb-4">客户长期在网，月均消费稳定在58元左右，主要消费项目为基础通信服务。</p>

            </div>

            <!-- 行为偏好区域 -->
            <div class="card p-6 mb-6">
                <div class="flex items-center mb-4">
                    <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3">
                        <i class="fa fa-heart"></i>
                    </div>
                    <h2 class="text-xl font-semibold m-0">行为偏好</h2>
                </div>
                <div class="space-y-3">
                    <div class="flex items-start">
                        <div
                            class="w-6 h-6 rounded-full bg-green-50 flex items-center justify-center text-green-500 mr-2 mt-1">
                            <i class="fa fa-check text-xs"></i>
                        </div>
                        <p class="text-gray-600">偏好基础通信服务，极少使用增值业务</p>
                    </div>
                    <div class="flex items-start">
                        <div
                            class="w-6 h-6 rounded-full bg-green-50 flex items-center justify-center text-green-500 mr-2 mt-1">
                            <i class="fa fa-check text-xs"></i>
                        </div>
                        <p class="text-gray-600">主要使用语音通话功能，数据流量使用较少</p>
                    </div>
                    <div class="flex items-start">
                        <div
                            class="w-6 h-6 rounded-full bg-green-50 flex items-center justify-center text-green-500 mr-2 mt-1">
                            <i class="fa fa-check text-xs"></i>
                        </div>
                        <p class="text-gray-600">习惯线下营业厅办理业务，较少使用APP</p>
                    </div>
                </div>
            </div>

            <!-- 风险预警区域 -->
            <div class="card p-6">
                <div class="flex items-center mb-4">
                    <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center text-red-600 mr-3">
                        <i class="fa fa-exclamation-triangle"></i>
                    </div>
                    <h2 class="text-xl font-semibold m-0">风险预警</h2>
                </div>
                <div class="space-y-4">
                    <div class="p-4 rounded-lg warning">
                        <div class="flex items-center">
                            <div
                                class="w-6 h-6 rounded-full bg-red-100 flex items-center justify-center text-red-500 mr-2 ">
                                <i class="fa fa-exclamation text-xs"></i>
                            </div>
                            <div>
                                <h3 class="font-medium m-0 text-red-700 text-left">存在欠费下降趋势,销户风险高</h3>
                                <!-- <p class="text-sm text-gray-600 mt-1">近3个月平均消费同比下降15%，存在消费降级趋势</p> -->
                            </div>
                        </div>
                    </div>
                    <!-- <div class="p-4 rounded-lg warning">
                        <div class="flex items-start">
                            <div
                                class="w-6 h-6 rounded-full bg-red-100 flex items-center justify-center text-red-500 mr-2 mt-1">
                                <i class="fa fa-exclamation text-xs"></i>
                            </div>
                            <div>
                                <h3 class="font-medium text-red-700 text-left"></h3>
                               
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const onClickLeft = () => {
  router.push("/main");
};

</script>
<style scoped>
.card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 14px;
    margin-right: 8px;
    margin-bottom: 8px;
}

.warning {
    background-color: #fef2f2;
    border-left: 4px solid #ef4444;
}

.chart-container {
    height: 200px;
    width: 100%;
    position: relative;
}
</style>